<template>
  <div class="container">
    <div>
      <el-button type="primary" @click="addBook" :icon="Edit" circle />

      <el-input v-model="input" placeholder="请输入书名" style="width: 200px;" />

      <el-select @change="change1" v-model="value" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in classNameList" :key="item.id" :label="item.className" :value="item.id" />
        <el-option key='0' label="默认" value='0'></el-option>
      </el-select>

      <el-select @change="change2" v-model="value2" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button @click="search" :icon="Search" circle />
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column>
          <template #default="scope">
            <img style="width: 80px;" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="bookName" label="书名" width="150" />
        <el-table-column prop="className" label="类名" width="120" />
        <el-table-column prop="info" label="描述" width="120" />
        <el-table-column label="状态" width="120">
          <template #default="scope">
            {{ scope.row.status == '0' ? '在售' : '已下架' }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="600" />

        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">{{ scope.row.status == 0 ?
              '下架' : '上架' }}</el-button>
            <el-button link type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>
    <div>
      <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :pager-count="11" layout="prev, pager, next"
        :total="total" @current-change="currentChange" />
    </div>
  </div>



  <el-dialog v-model="dialogFormVisible" title="新增书">

    <div>
      封面
      <el-upload ref="upload" class="upload-demo" :action="BASE_URL + '/admin/addBook'" :limit="1" :on-success="upSuccess"
        :on-exceed="handleExceed" :auto-upload="false" :data="{
          bookName: bookName,
          bookClass: valueCardClassNameId,
          info: info,
          price: price
        }">
        <template #trigger>
          <el-button type="primary">选择</el-button>
        </template>

        <template #tip>
          <div class="el-upload__tip text-red">
            选择一个图片作为封面
          </div>
        </template>
      </el-upload>
      <div>
        书名
        <el-input v-model="bookName" placeholder="Please input" style="width: 217px;" />
      </div>

      <div>
        类别
        <el-select v-model="valueCardClassNameId" class="m-2" placeholder="Select">
          <el-option v-for="item in optionsCard" :key="item.id" :label="item.className" :value="item.id" />
        </el-select>
      </div>

      <div>
        描述
        <el-input v-model="info" placeholder="Please input" style="width: 217px;" />
      </div>



      <div>
        价格
        <el-input-number v-model="price" :precision="2" :step="0.1" :max="1000" />
      </div>


    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button class="ml-3" type="success" @click="submitUpload">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisibleEdit" title="修改书">

    <div>
      封面
      <el-upload ref="upload" class="upload-demo" :action="BASE_URL + '/admin/changeBookPic'" :limit="1" :on-success="upSuccess"
        :on-exceed="handleExceed" :auto-upload="false" :data="{
          id: pid
        }">
        <template #trigger>
          <el-button type="primary">select file</el-button>
          <el-button class="ml-3" type="success" @click="submitUpload">
            更改封面
          </el-button>
        </template>

        <template #tip>
          <div class="el-upload__tip text-red">
            选择一个图片
          </div>
        </template>
      </el-upload>

      书名
      <el-input v-model="bookName" placeholder="Please input" />
      类别
      <el-select v-model="valueCardClassNameId" class="m-2" placeholder="Select">
        <el-option v-for="item in optionsCard" :key="item.id" :label="item.className" :value="item.id" />
      </el-select>
      描述
      <el-input v-model="info" placeholder="Please input" />
      价格
      <el-input-number v-model="price" :precision="2" :step="0.1" :max="1000" />

    </div>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="changeMsg">
          提交
        </el-button>

      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getBookListApi, type Book, getBookCount, getBook, updataBook, soldOutApi, searchApi } from '@/api/Admin';
import { getBookClass } from '@/api/Book'
import {
  Edit,
  Search,
} from '@element-plus/icons-vue'
import { ElButton, ElMessage, genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { BASE_URL } from '@/api/ApiCons';

const currentPage = ref(1)

const pageSize = ref(20)

const total = ref(100)

const value = ref('0')
const value2 = ref('3')

const input = ref('')

const dialogFormVisibleEdit = ref(false)

const valueCardClassNameId = ref('')

type Book = {
  bookName: string,
  bookClass: number,
  info: string,
  price: number
}

const pid = ref()
const bookName = ref()
const info = ref()
const price = ref<number>(0)

const upload = ref<UploadInstance>()


const upSuccess = (res:any) =>{
if(res.code === 200){
  ElMessage({message:res.msg,type:'success'})
}else{
  ElMessage({message:res.msg,type:'error'})
}

}

const search = () => {
  if (value.value === '0' && value2.value === '3' && input.value === '') {
    getBookListApi(((currentPage.value - 1) * pageSize.value), pageSize.value).then(res => {
      tableData.value = res.data.data
    })
  } else {
    searchApi({
      classId: value.value,
      status: value2.value,
      bookName: input.value
    }).then(res => {

      tableData.value = res.data.data


    })
  }

}

const edit = (id: number) => {
  dialogFormVisibleEdit.value = true
  getBook(id).then(res => {


    bookName.value = res.data.data.bookName
    info.value = res.data.data.infor
    price.value = res.data.data.price
    valueCardClassNameId.value = res.data.data.classId
    pid.value = id
    ElMessage({ message: res.data.msg, type: 'success' })

  })
}
const changeMsg = () => {
  dialogFormVisibleEdit.value = false;
  updataBook(pid.value, bookName.value, info.value, price.value, valueCardClassNameId.value as unknown as number).then(res => {

    if (res.data.code === 200) {
      getBookListApi(((currentPage.value - 1) * pageSize.value), pageSize.value).then(res => {
        tableData.value = res.data.data
      })
      ElMessage({ message: res.data.msg, type: 'success' })
    } else {
      ElMessage({ message: res.data.msg, type: 'error' })
    }

  })
}
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const submitUpload = () => {

  dialogFormVisible.value = false
  upload.value!.submit()
  setTimeout(() => {
    getBookListApi(0, pageSize.value).then(res => {
      tableData.value = res.data.data
    })
  }, 500);




}

const dialogFormVisible = ref(false)

const addBook = () => {
  dialogFormVisible.value = true
}

const change1 = (v: any) => {
  if (v === '0')
    console.log('moren');
  else
    console.log('find');



}
const change2 = (v: any) => {
  console.log(v);

}
const optionsCard = ref()

const options = [
  {
    label: '已下架',
    value: '1'
  },
  {
    label: '未下架',
    value: '0'
  },
  {
    label: '默认',
    value: '3'
  }
]
let classNameList = ref<Array<any>>()

getBookClass().then(res => {
  console.log(res.data);
  classNameList.value = res.data.data
  console.log(classNameList.value);
  optionsCard.value = res.data.data
})

const handleClick = (id: any) => {
  console.log(id)
  soldOutApi(id).then(res => {
    getBookListApi((currentPage.value - 1) * pageSize.value, pageSize.value).then(res => {
      tableData.value = res.data.data
    })
  })
}

const currentChange = (page: any) => {
  getBookListApi((page - 1) * pageSize.value, pageSize.value).then(res => {
    tableData.value = res.data.data
  })
}

getBookCount().then(res => {
  total.value = res.data.data
})

getBookListApi(0, pageSize.value).then(res => {
  tableData.value = res.data.data
})

const tableData = ref<Array<Book>>()
</script>

<style scoped ></style>